<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Example</title>
</head>
<body>

<div id="response1"></div>
<div id="response2"></div>
<div id="response3"></div>
<div id="response4"></div>

<script>
function makeRequest(method, url, callback, data) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            // 请求完成，调用回调函数处理响应
            callback(xhr.responseText);
        }
    };

    xhr.open(method, url, true);
    xhr.setRequestHeader("Content-Type", "application/json");

    if (data) {
        xhr.send(JSON.stringify(data));
    } else {
        xhr.send();
    }
}
var ip = "http://localhost:8081/article"
// 获取所有文章
makeRequest('GET', ip+'/getAll', function(response) {
    console.log("获取"+response)
});

// 获取单篇文章
makeRequest('GET', ip+'/getOne/101', function(response) {
    console.log("获取单篇文章"+response)
});

// 新增文章
// var addArticleData = {
//     author: "1",
//     title: "New Article",
//     content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
//     cover_url: "https://example.com/image.jpg"
// };

// makeRequest('POST', ip+'/addOne', function(response) {
//     console.log("新增文章"+response)
// }, addArticleData);

// 修改文章
var updateArticleData = {
    id: "cd5cb01b-10d5-454c-9d94-1b353326d4c0",
    author: "1",
    title: "Updated Title",
    content: "Updated content",
    cover_url: "https://example.com/updated-image.jpg"
};

makeRequest('POST', ip+'/update', function(response) {
    console.log("修改文章"+response)
}, updateArticleData);

</script>

</body>
</html>
